<template>
  <view class="main_box">
    <view class="user flex">
      <view class="icon">
        <image src="/static/image/user.png" />
      </view>
      <view class="info_box">
        <view class="flex fl1 user_info">
          <view class="userName">{{ user.userName }}</view>
          <view class="postName">{{ user.deptName }}·{{ user.postName }}</view>
        </view>
        <view class="fl1 company_info">
          {{ user.companyName }}
        </view>
      </view>
    </view>
    <image class="yj" src="http://129.211.211.126/download/yjtjq.png" />
    <title-view style="width: 90%" :item="{title:'今日订单',num:0}"  @changePsw="changePassWord" />
    <view class="out_btn" @tap="login_out">
      退出登录
    </view>
  </view>
</template>

<script>

import { getUserInfo } from '@/service/auth'
import TitleView from '@/components/titleView.vue'

export default {
  name: 'home',
  components: { TitleView },
  data(){
    return{
      user:{}
    }
  },

  onShow(){
    this.$forceUpdate()
  },
  onPullDownRefresh(){

  },
  created() {
    this.user = getUserInfo();
    console.log(this.user)
  },
  methods: {
    login_out(){
      uni.showModal({
        title: '提示',
        content: '确定退出登录？',
        success: (res) => {
          if (res.confirm) {
            uni.reLaunch({
              url: '/pages/login/index'
            });
          }
        }
      })
    },
    changePassWord(){
      console.log("changePSw")
      uni.navigateTo({
        url: '/pages/updatePassword/index'
      });
    }
  }
}
</script>

<style lang="scss" scoped >
.main_box {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: 20%;
  align-items: center;
  //background-image: url("@/static/image/loginBg.png");
  background-image: url("http://129.211.211.126/download/homeBg.png");
  background-size: cover;
  background-repeat: repeat;
  .user{
    width: 95%;
    .icon{
      width: 30%;
      display: flex;
      align-items: center;
      justify-content: center;
      image{
        width: 150rpx;
        height: 150rpx;
      }
    }
    .info_box{
      flex: 1;
      display: flex;
      flex-direction: column;
      .user_info{
        flex: 1;
        display: flex;
        align-items: flex-end;
        .userName{
          font-size: 45rpx;
          line-height: 45rpx;
          color: rgb(12, 12, 21);
          margin-right: 20rpx;
        }
        .postName{
          color: rgb(140, 143, 151);
          font-size: 26rpx;

        }
      }
      .company_info{
        flex: 1;
        display: flex;
        align-items: center;
        color: rgb(140, 143, 151);
        font-size: 26rpx;
      }
    }
  }
  .yj{
    width: 95%;
    margin-top: 50rpx;
  }
  .out_btn{
    background: rgb(38, 47, 59);
    width: 95%;
    height: 90rpx;
    border-radius: 20rpx;
    position: fixed;
    bottom: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
  }
}
</style>
